<template>
  <div class="page-wraper">
    <div v-for="data in detailData" :key="data.id" class="codes-wrap">
      <p>
        <span>{{ date }}</span><span style="margin-left: 10px">{{ realname }}制</span>
      </p>
      <div class="scan">
        <vue-qr :text="JSON.stringify({id: data.id, EntityType: 'workOrder'})" :size="120" :margin="0"></vue-qr>
        <p class="code">{{ data.orderCode || '-' }}</p>
      </div>
      <h2 style="text-align: center; width: 100%">生产工单</h2>
      <div style="height: 60px"></div>
      <div class="list">
        <p>
          <span>关联订单：</span>
          <span>{{ data.relevanceOrder || '-' }}</span>
        </p>
        <p>
          <span>负责人：</span>
          <span>{{ data.principalName || '-' }}</span>
        </p>
        <p>
          <span>物料编号：</span>
          <span>{{ data.goodsCode || '-' }}</span>
        </p>
        <p>
          <span>物料名称：</span>
          <span>{{ data.goodsName || '-' }}</span>
        </p>
        <p>
          <span>物料类型：</span>
          <span>{{ data.goodsTypeName || '-' }}</span>
        </p>
        <p>
          <span>规格：</span>
          <span>{{ data.goodsSpec || '-' }}</span>
        </p>
        <p>
          <span>计划生产数量：</span>
          <span>{{ data.num || '-' }}</span>
        </p>
        <p>
          <span>基本单位：</span>
          <span>{{ data.goodsBasicUnitText || '-' }}</span>
        </p>
        <p style="width: 100%">
          <span>计划时间：</span>
          <span>{{ moment(data.planStartTime).format('YYYY-MM-DD HH:mm') || '-' }} ~
            {{ moment(data.planEndTime).format('YYYY-MM-DD HH:mm') || '-' }}</span>
        </p>
      </div>
      <h3 style="text-align: center; width: 100%">生产工艺</h3>
      <table class="table" border>
        <tr>
          <td>序号</td>
          <td>工序名称</td>
          <td>班组</td>
          <td>计划开始时间</td>
          <td>计划结束时间</td>
          <td>设备</td>
          <td>工序要求</td>
        </tr>
        <tr v-for="(item, index) in data.orderTaskListVoList" :key="index">
          <td>{{ item.serialNo || '-' }}</td>
          <td>{{ item.processName || '-' }}</td>
          <td>{{ item.teamName || '-' }}</td>
          <td>{{ item.planStartTime || '-' }}</td>
          <td>{{ item.planEndTime || '-' }}</td>
          <td>{{ item.deviceName || '-' }}</td>
          <td>{{ item.processRequire || '-' }}</td>
        </tr>
      </table>
      <h3 style="text-align: center; width: 100%; margin-top: 20px;">计划投料</h3>
      <table class="table" border>
        <tr>
          <td>序号</td>
          <td>物料编号</td>
          <td>物料名称</td>
          <td>物料类型</td>
          <td>单位</td>
          <td>计划投料</td>
        </tr>
        <tr v-for="(item, index) in data.materialListVoList" :key="index">
          <td>{{ index+1 }}</td>
          <td>{{ item.goodsCode || '-' }}</td>
          <td>{{ item.goodsName || '-' }}</td>
          <td>{{ item.goodsTypeName || '-' }}</td>
          <td>{{ item.goodsBasicUnitText || '-' }}</td>
          <td>{{ item.planTotalNum || '-' }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import vueQr from 'vue-qr'
import { getAction } from '../../../../api/manage'
export default {
  components: { vueQr },
  props: {
    ids: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      moment,
      detailData: [],
      realname: '',
      date: '',
    }
  },
  created() {
    let ids = this.ids.join(',')
    this.realname = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.realname
    this.date = moment(new Date()).format('YYYY-MM-DD')
    getAction('/mess/messProductOrder/queryBatchById', { ids }).then((res) => {
      console.log(res, 'res')
      if (res.code === 200) {
        this.detailData = res.result
        this.detailData.realname = realname
        this.detailData.date = date
        console.log(this.detailData, 'detailData')
      }
    })
  },
  methods: {},
}
</script> 

<style scoped lang='less'>
.page-wraper {
  height: 70vh;
  overflow-y: scroll;
}
.codes-wrap {
  height: 100vh;
  width: 100%;
  position: relative;
}
.scan {
  position: absolute;
  top: 80px;
  right: 26px;
}
.code {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  margin-top: 2px;
}
.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  p {
    width: 50%;
    color: #000;
    font-size: 16px;
    font-weight: 500;
  }
}
.table {
  margin-top: 20px;
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 16px;
  font-weight: 500;
}
</style>